<!-- 预约会议 -->
<template>
  <view>
    <!-- 日历 -->
    <!-- 已隐藏 Start -->
    <view class="calendar" v-if="false">
      <scroll-view scroll-x="true" class="calendar-scroll">
        <!-- 因为 scroll-view 会有未知的影响所以做一个嵌套 -->
        <view class="box">
          <!-- 日期 -->
          <view v-for="i in date" class="box-box">
            <!-- 要做布局再来一个嵌套 -->
            <view class="box-box-box" v-if="true">
              <view>{{ i.week }}</view>
              <view class="round" v-if="i.day === '1.10'" style="background-color: #1890FF;">今</view>
              <view class="round" v-else>{{ i.day }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 已隐藏 End-->
    <!-- 会议室类型选择 -->
    <view class="choose">
      <view class="choose-title choose-info">所有会议室</view>
      <view class="choose-setting choose-info" @click="settingShow = !settingShow">
        <text>设施</text>
        <image src="/static/bookMeeting/under.svg" v-if="!settingShow"/>
        <image src="/static/bookMeeting/above.svg" v-if="settingShow"/>
      </view>
    </view>
    <!-- 多选 -->
    <view class="choose-box" v-if="settingShow">
      <chooseButton></chooseButton>
      <view class="queren">
        <button>确认</button>
        <button>取消</button>
      </view>
    </view>
    <!-- 空会议室列表 -->
    <view class="emptyList-box" v-if="isEmptyListNull">
      <view class="emptyList" v-for="i in meetingRoom" @click="selectMeetingRoom(i)">
        <!-- 会议室编号 -->
        <view class="title interval">
          <text>{{ i.MeetingRoomName }}</text>
          <view class="tag">
            <u-tag text="待审核" plain size="mini" type="warning" v-if="i.IsAudit === 0"/>
          </view>
        </view>
        <!-- 会议室信息 -->
        <view class="info interval">
          <text>
            <image src="/static/bookMeeting/local.svg"/>
          </text>
            {{ i.MeetingRoomLocation }}
          <text class="spacer">
            <image src="/static/allMeetingIcos/meeting.svg"></image>
            {{ i.MeetingRoomCapacity }}人
          </text>
          <text class="spacer">
            <image src="/static/bookMeeting/computer.svg"/>
            <text v-for="j in i.Devices"
                  style="margin-left: 1%;">{{ j }}
            </text>
          </text>
        </view>
        <!-- 图像显示会议厅 -->
        <imageDisplay class="interval" :id="i.MeetingRoomID"></imageDisplay>
      </view>
    </view>

  </view>
</template>

<script>
import chooseButton from './component/chooseButton.vue'
import imageDisplay from './component/imageDisplay.vue'
import {
  request
} from '../../utils/request'

export default {
  data() {
    return {
      settingShow: false, //控制设施栏
      date: [{week: '一', day: '1.10'}, {week: '二', day: '1.11'}, {week: '三', day: '1.12'}, {
        week: '四',
        day: '1.13'
      }, {week: '五', day: '1.14'}, {week: '六', day: '1.15'}, {week: '日', day: '11.16'}],
      //假数据
      meetingRoom: [],
      isEmptyListNull: true,
      tagName: '',
      showTime: []
    }
  },
  methods: {
    //获取会议室信息
    getMeetingRoom() {
      let list = request.ListMeetingRooms();
      list.then((res) => {
        this.meetingRoom = res.data;
      })
    },
    //会议室选择跳转 @info跳转参数(测试会议室ID。。)
    selectMeetingRoom(info) {
      console.log(info)
      uni.navigateTo({
        url: `/pages/meeting/meeting?id=${info.MeetingRoomID}&MeetingRoomName=${info.MeetingRoomName}&MeetingRoomLocation=${info.MeetingRoomLocation}&LifeCycle=Input`
      });
    },
    // getMeetingRoomTime() {
    //   let promise = request.occupation();
    //   promise.then((res) => {
    //        this.showTime = res
    //        /* res.forEach((index, key) => {
    //       console.log(index.MeetingRoomID, key)
    //     })*/
    //   });
    // }
  },
  mounted() {
    // this.isEmptyListNull = this.meetingRoom.length !== 0;
    this.getMeetingRoom();
    // this.getMeetingRoomTime(); // 获取会议室占用情况

  },
  components: {
    chooseButton,
    imageDisplay
  }
}
</script>

<style>
@import 'bookMeeting.css';
</style>